<template>
  <view class="home-container">
    <!-- 顶部蓝色背景区域 -->
    <view class="blue-header">
      <!-- 服务卡片 -->
      <view class="service-cards">
        <view class="service-card" @click="navigateTo('role-selection')">
          <view class="card-icon">
            <image src="/static/jk/j1.png" mode="aspectFit" class="icon-img"></image>
          </view>
          <view class="card-title">打借条</view>
          <view class="card-desc">打借条明确双方责任，借贷更安心</view>
        </view>

        <view class="service-card" @click="navigateTo('transaction')">
          <view class="card-icon">
            <image src="/static/jk/j2.png" mode="aspectFit" class="icon-img"></image>
          </view>
          <view class="card-title">查询往来信用</view>
          <view class="card-desc">查看往来借款方信用状况</view>
        </view>
      </view>

      <!-- 朋友找我借钱 -->
      <view class="friend-loan-section" @click="navigateTo('role-selection')">
        <view class="friend-loan-content">
          <view class="friend-loan-text">
            朋友找我借钱
          </view>
          <view class="sub-text">用电子借条解决出借顾虑</view>
        </view>
        <view class="loan-btn">去补欠条</view>
      </view>
    </view>

    <!-- 白色圆角内容区域 -->
    <view class="white-content">
      <!-- 轮播图 -->
      <swiper class="banner-swiper" circular indicator-dots autoplay interval="3000000" duration="500">
        <swiper-item v-for="(item, index) in banners" :key="index">
          <view v-if="item.params" style="position: absolute; bottom: 20rpx; left: 20rpx; z-index: 1; color: #fff;">
            <view style="line-height: 40rpx; font-size: 28rpx;">{{ parseParams(item.params).title }}</view>
            <view style="font-size: 24rpx; line-height: 40rpx; color: #333;">{{ parseParams(item.params).desc }}</view>
          </view>
          <image :src="item.imageUrl" mode="aspectFill" class="banner-img"></image>
        </swiper-item>
      </swiper>

      <!-- 客服区域 -->
      <view class="customer-service">
        <image :src="customer_service[0] ? customer_service[0].imageUrl : ''" mode="aspectFill" class="service-bg-img">
        </image>
        <view class="service-content" v-if="customer_service[0] && customer_service[0].params">
          <view class="service-title">{{ parseParams(customer_service[0].params).title }}</view>
          <view class="service-desc">{{ parseParams(customer_service[0].params).desc }}</view>
        </view>
      </view>

      <!-- 服务图标 -->
      <view class="service-icons">
        <view class="service-icon-item" v-for="(item, index) in menus" :key="index">
          <view class="icon-circle">
            <image :src="item.imageUrl" mode="aspectFit" class="icon-img"></image>
          </view>
          <text class="icon-text">{{ item.title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getContentConfig } from '@/api/user'
export default {
  data() {
    return {
      menus: [],
      banners: [],
      customer_service: []
    }
  },
  computed: {
    parseParams() {
      return function (params) {
        return JSON.parse(params)
      }
    }
  },
  methods: {
    navigateTo(page) {
      if (page === 'role-selection') {
        uni.navigateTo({
          url: '/pages/role-selection/index'
        });
      } else if (page === 'transaction') {
        uni.switchTab({
          url: '/pages/transaction/index'
        });
      }
    },
    
  },
  onLoad() {
    // 禁止页面滚动
    // uni.setPageMeta({
    //   scrollTop: 0,
    //   enableScroll: false
    // });
    //
    
    getContentConfig().then(res => {
      console.debug(res)
      this.menus = res.data.data.filter(item => item.type === 'menu') || []
      this.banners = res.data.data.filter(item => item.type === 'banner') || []
      this.customer_service = res.data.data.filter(item => item.type === 'customer_service') || []
      console.debug(this.banners)
    })
  }
}
</script>

<style lang="scss">
page {
  background-color: #4080ff;
  height: 100%;
}

.home-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 100%;
}

/* 顶部蓝色背景区域 */
.blue-header {
  background-color: #4080ff;
  padding-bottom: 30rpx;
}

/* 白色圆角内容区域 */
.white-content {
  background-color: #f5f7fa;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  flex: 1;
  padding: 30rpx 20rpx;
  padding-bottom: 150rpx;
  /* 为更高的底部导航预留空间 */
  overflow: hidden;
}

/* 服务卡片 */
.service-cards {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 20rpx;
}

.service-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  width: 48%;
  padding: 20rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-icon {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-img {
  width: 100%;
  height: 100%;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.card-desc {
  font-size: 26rpx;
  color: #999999;
  text-align: center;
}

/* 朋友找我借钱 */
.friend-loan-section {
  margin: 0 20rpx;
  padding: 25rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
}

.friend-loan-content {
  display: flex;
  flex-direction: column;
}

.friend-loan-text {
  font-size: 32rpx;
  font-weight: bold;
}

.sub-text {
  font-size: 26rpx;
  font-weight: normal;
  margin-top: 8rpx;
  opacity: 0.8;
}

.loan-btn {
  background-color: #ffffff;
  color: #4080ff;
  padding: 12rpx 30rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
}

/* 轮播图 */
.banner-swiper {
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
}

.banner-img {
  width: 100%;
  height: 100%;
}

/* 客服区域 */
.customer-service {
  border-radius: 12rpx;
  overflow: hidden;
  height: 200rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  position: relative;
}

.service-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.service-content {
  color: #ffffff;
  position: relative;
  z-index: 1;
}

.service-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.service-desc {
  font-size: 26rpx;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* 服务图标 */
.service-icons {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 40rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
}

.service-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-circle {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12rpx;
  background-color: #f5f7fa;
  /* 统一背景色 */
  overflow: hidden;
}

.icon-img {
  width: 70%;
  height: 70%;
}

.icon-text {
  font-size: 26rpx;
  color: #333333;
}
</style>